<template>
  <view class="content pb-50">
    <view v-if="JSON.stringify(list) != '[]'" class="list-block">
      <view class="item-block mt-20" v-for="(item, index) in list" :key="index">
        <view class="header-block border-b-common pb-20">
          <view class="date-block">上报人：{{item.checkPeo ? item.checkPeo : '-'}}</view>
          <view class="date-block">上报部门：{{item.checkDept ? item.checkDept : '-'}}</view>
        </view>
        <view class="body-block border-b-common pb-10">
          <view class="body-item pt-20 pb-25">问题描述：{{item.description ? item.description : '-'}}</view>
          <view class="body-item pt-20 pb-25">所在位置：{{item.place ? item.place : '-'}}</view>
          <view class="image-block pt-20 pb-25">
            <view>问题图片：</view>
            <scroll-view class="scroll-view" :scroll-x="true">
              <view class="image-list">
                <image class="image-item mr-10" v-for="(child, ind) in item.ossImg" :key="ind" :src="child.url" @click="previewImage(child.url)"></image>
              </view>
            </scroll-view>
          </view>
        </view>
        <view class="footer-block pt-20">
          <view class="info-block" style="width: 500rpx;">
            <view class="date-block" style="width: 100%;">上报时间：{{item.checkDate ? item.checkDate : '-'}}</view>
          </view>
          <!-- <view class="button-block">
            <u-button v-if="params.states == 0" class="button" type="primary" :customStyle="{width: '120rpx', height: '50rpx'}" text="下达"></u-button>
          </view> -->
        </view>
      </view>
    </view>
    <view v-else class="empty-block">
      <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>
    </view>
    <view class="position-block" @click="routeByUrl('/pagesDanger/handClapDetail')">
      <u-icon name="plus" color="#FFFFFF" size="50rpx"></u-icon>
    </view>
  </view>
</template>

<script>
  import { getHandClapListApi } from '@/apis/danger/index.js'
  
  export default {
    data() {
      return {
        params: {
          pageNo: 1,
          pageSize: 10,
          source: '0'
        },
        list: [],
        pushState: true
      }
    },
    onPullDownRefresh() {
      this.getHandClapList(Object.assign(this.params, {pageNo: 1, pageSize: 10}))
    },
    onReachBottom() {
      if(this.pushState) this.getHandClapList(Object.assign(this.params, {pageNo: this.params.pageNo + 1}), false)
    },
    onShow() {
      this.getHandClapList(this.params)
    },
    methods: {
      getHandClapList: function(params, freshState = true) {
        getHandClapListApi(params).then(res => {
          if(freshState) {
            this.pushState = true
            this.list = res.list
          } else {
            this.list = this.list.concat(res.list)
          }
          if(res.list.length < this.params.pageSize) this.pushState = false
          uni.stopPullDownRefresh()
        }).catch(err => console.warn(err))
      },
      previewImage: function(url) {
        uni.previewImage({ urls: [url] })
      },
      routeByUrl: function(url) {
        uni.navigateTo({ url })
      }
    }
  }
</script>

<style>
  page {
    background-color: #F4F4F4;
  }
</style>

<style lang="scss" scoped>
  .content {
    padding: 0 25rpx 50rpx 25rpx;
    .list-block {
      .item-block {
        background-color: #FFFFFF;
        border-radius: 6rpx;
        box-shadow: 0 0 10rpx 0 #F4F4F4;
        padding: 25rpx;
        margin-top: 25rpx;
        .header-block {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .date-block {
            width: 50%;
            font-size: 24rpx;
            line-height: 32rpx;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .body-block {
          .body-item {
            font-size: 28rpx;
            line-height: 40rpx;
            color: #666666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .image-block {
            font-size: 28rpx;
            line-height: 40rpx;
            color: #666666;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .scroll-view {
              width: 500rpx;
              white-space: nowrap;
              .image-list {
                display: flex;
                flex-direction: column;
                align-items: center;
                display: inline-block;
                .image-item {
                  width: 120rpx;
                  height: 100rpx;
                  border-radius: 10rpx;
                  background-color: #999999;
                }
              }
            }
          }
        }
        .footer-block {
          @extend .header-block;
          align-items: flex-end;
        }
        .button-block {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .button {
            width: 100rpx;
          }
        }
      }
    }
    .empty-block {
      padding-top: 300rpx;
    }
    .position-block {
      position: fixed;
      bottom: 30rpx;
      left: 50%;
      margin-left: -40rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #3F99F7;
      box-shadow: 0 0 10rpx 0 #999999;
    }
  }
</style>